import XtxHomePanel from "@/components/library/xtxHomePanel";
import XtxMore from "@/components/library/xtxMore";
import { useAxiosWithAuth } from "@/utils/useAxiosWidthAuth";
import { useEffect, useRef, useState } from "react";
import { Link } from "react-router-dom";
import "./index.scss";
import { CSSTransition } from "react-transition-group";
import HomeSkeleton from "../homeSkeleton";
function HomeHot() {
  const [goods, setGoods] = useState<any[]>([]);
  const nodeRef = useRef(null); // 创建一个 ref
  const axios = useAxiosWithAuth();
  useEffect(() => {
    async function getNews() {
      const res: any = await axios({
        url: "/home/hot",
        method: "get",
      });
      console.log(res);
      setGoods(res.result);
    }
    getNews();
  }, []);
  return (
    <>
      <div className="home-new">
        <XtxHomePanel
          title="人气推荐"
          subTitle="人气爆款 不容错过"
          right={<XtxMore path="/"></XtxMore>}
        >
          <div style={{ position: "relative", height: "426px" }}>
            <CSSTransition
              in={goods.length > 0}
              timeout={300}
              classNames="fade"
              unmountOnExit
              nodeRef={nodeRef} // 传递 ref
            >
              <div ref={nodeRef}>
                {goods.length ? (
                  <ul className="goods-list">
                    {goods.map((item) => (
                      <li key={item.id}>
                        <Link to={`/product/${item.id}`}>
                          <img src={item.picture} alt="" />
                          <p className="name">{item.title}</p>
                          <p className="desc">{item.alt}</p>
                        </Link>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <HomeSkeleton bg="#fff" />
                )}
              </div>
            </CSSTransition>
          </div>
        </XtxHomePanel>
      </div>
    </>
  );
}

export default HomeHot;
